/*
* @Author: jh
* @Date: 2018/4/10
* @description: cvs纠错列表
*/
<template>
  <div>
    <!-- <div class="p-30">角色列表</div> -->
    <el-form ref="form" :model="cvsCorrectionListSearch" label-width="80px">
        <el-row >
            <el-col>
                <el-form-item label="查询" class='pull-left m-r-10' >
                    <el-input v-model="cvsCorrectionListSearch.contextName" class='w-250' placeholder="请输入信息名称" @keyup.enter.native="getCvsCorectionList">
                    </el-input>
                </el-form-item>
                <el-form-item label-width="0" class='pull-left'>
                    <el-select v-model="cvsCorrectionListSearch.titleType" placeholder="请选择" class='w-120'>
                        <!-- <el-option label="请选择" value=""></el-option> -->
                        <el-option 
                            v-for="(item,index) in searchTitleType"
                            :key='index'
                            :label="item.dictName" 
                            :value="Number(item.dictValue)">
                        </el-option>
                    </el-select>
                </el-form-item>
            
                <el-form-item label="纠错类型" class='pull-left m-l-30'>
                    <el-select v-model="cvsCorrectionListSearch.contextType" placeholder="请选择" class='w-120'>
                        <!-- <el-option label="全部" value=""></el-option> -->
                        <el-option 
                        v-for='(item,index) in contextType'
                        :key='index' 
                        :label="item.dictName" 
                        :value="Number(item.dictValue)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="纠错状态" class="pull-left m-l-30">
                    <el-select v-model="cvsCorrectionListSearch.repairStatus" placeholder="请选择活动区域">
                        <el-option label="全部" value=""></el-option>
                        <el-option 
                        v-for='(item,index) in repairStatus'
                        :key='index' 
                        :label="item.dictName" 
                        :value="Number(item.dictValue)">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label-width="0px"  class='pull-right'> 
                   <el-button  @click="getCvsCorectionList" type="primary" round>搜索</el-button>
                </el-form-item>
            </el-col>
        </el-row> 
        <el-row > 
            <el-col>
                <el-form-item label="提交时间"  class='pull-left '>
                    <el-date-picker class='w-150 m-r-5'  v-model="cvsCorrectionListSearch.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至"  class='pull-left' label-width="30px">
                    <el-date-picker class='w-150'  v-model="cvsCorrectionListSearch.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <!-- <el-col :span='8' >
              <el-form-item label-width="0px"> 
                <el-button  @click="getCvsCorectionList" type="primary" round>搜索</el-button>
              </el-form-item>
            </el-col> -->
        </el-row> 
      </el-form>  
       <!-- 信息汇总部分-->
      
           <el-row class='p-l-12'>
              <el-col>
                <!-- <span>已选中（0）个</span>  -->
                <span class='ca-info-color'>已纠错信息：{{  this.cvsCorrectionCountInfoVo.yesCount }} 条</span> 
                <span class='m-l-20 ca-info-color-red'> 未纠结信息：{{ this.cvsCorrectionCountInfoVo.noCount  }}条</span> 
             </el-col>
           </el-row>
       <!-- 列表部分 -->  
      <div class="m-t-15">
                <el-table
                    :data="tableData"
                    >
                    <el-table-column
                        property="contextName"
                        label="信息名称" 
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <!-- <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                                <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">
                                   {{ scope.row.roleName }}
                                </el-button>
                            </el-tooltip> -->
                             <el-button  type="text" >
                                   {{ scope.row.contextName }}
                                </el-button>
                        </template>
                    </el-table-column>
                      <el-table-column
                        property="contextType"
                        label="纠错类型" 
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                             <span>{{scope.row.contextType | getNameById('contextType')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="createTime"
                        label="提交时间">
                        <template slot-scope="scope">
                              {{scope.row.createTime | cmsMoment('YYYY-MM-DD HH:mm:ss')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="contextUrl"
                        label="链接">
                        <!-- <template slot-scope="scope">
                            <span :class="scope.row.licenseStatus===0?'ca-color-danger':scope.row.licenseStatus==1?'ca-info-color__blue':'ca-info-color__gray'">
                                {{scope.row.licenseStatus+'' | getDicNameById('guestState')}}
                            </span>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="userName"
                        label="用户名称">
                    </el-table-column>
                    <el-table-column 
                        property="repairTime"
                        label="修复时间" >
                         <template slot-scope="scope">
                            <span>{{scope.row.repairTime | cmsMoment('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column
                        property="repairStatus"
                        label="信息状态">
                          <template slot-scope="scope">
                            <span>{{scope.row.repairStatus | getNameById('repairStatus')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="repairStatus"
                        label="纠错状态">
                        <template slot-scope="scope">
                             <!-- 过滤器版 -->
                            <!--<span>{{scope.row.repairStatus | getNameById('repairStatus')}}</span> -->
                             <!-- 显示版 -->
                            <span v-if='scope.row.repairStatus===1'>{{scope.row.repairStatus}}修复完成</span>
                            <span v-else >{{scope.row.repairStatus}}未修复</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="150px"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button v-if='scope.row.repairStatus===2'  type="text" @click="repairInfo(scope.row.id, scope.row.repairStatus)">修复</el-button>
                            <el-button v-else type="text"  @click="noRepairConfirm(scope.row.id, scope.row.repairStatus)">未修复</el-button>
                            <el-button  type="text" @click="deleteConfirm(scope.row.id)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="align-center m-t-30"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="pageParam.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import CorrectionService from '../../../service/cvs/cvs-correction'; // 接口
// import { CorrectionDto } from '../../../api/Interface'; // 接口
import { CVSCorrectionSearchDto } from '../../../service/cvs/cvsInterface'; // 接口
import { PageParam, CVSCorrectionCountInfoVo } from '../../../api/Interface'; // 接口
import { getParamsForList, setParamsForList } from '../../../libs/utils';

interface TableData {
   [index: number]: object;
}
@Component({
  components: { 
    
  }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public msg: number = 123;
  public cvsCorrectionListSearch: CVSCorrectionSearchDto = {
        // 'contextName': '', // 搜索框内容（查询）
         'titleType': 1, // 搜索框内容（查询）类型：1：按内容，2：按编辑人 3：按ID
        // 'contextType': 1, // 纠错类型 主体：【1:企业 2:机构 3:基金 4:LP 15:人物 70:中介机构】 事件【16:新股发行 17:融资事件 18:并购事件 55:退出事件】 其他【80:新闻 90:研究报告】
        // 'repairStatus': 1, // 纠错状态 1已修复 2未修复
        // 'startTime': '', // 提交时间（开始时间）
        // 'endTime': '', // 提交时间（结束时间）
    } as CVSCorrectionSearchDto;

  public pageParam: PageParam = {
       pageIndex: 1,
       pageSize: 10,
  } as PageParam; // 分页

  public tableData: TableData = [{roleName: 'ggggg'}, {roleName: 'kkkkkk'}]; // 后台数据
  public totalCount: number = 0; // 总数
  public currentPage: number = 1; // 当前页
  public id: string = '-1'; // 角色id

  public cvsCorrectionCountInfoVo: CVSCorrectionCountInfoVo = {} as CVSCorrectionCountInfoVo;
  public errorCorrection: number = 0; // 已纠错
  public noCorrection: number = 0; // 未纠错

  public searchTitleType: Array< object > = this.$store.state.user.dictionary.dicList.searchTitleType; // 搜索类型
  public contextType: Array< object > = this.$store.state.user.dictionary.dicList.contextType; // 纠错类型
  public repairStatus: Array< object > = this.$store.state.user.dictionary.dicList.repairStatus; // 纠错状态

  // refs
  public $refs: { };

  // watch
  @Watch('msg')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
    // console.log(this.$store.state, 'pppp');
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.cvsCorrectionListSearch = Object.assign({}, this.cvsCorrectionListSearch, localParams.searchParams);
    this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
    // 获取local中存储的搜索条件 end
    this.getCvsCorectionList();
    this.getCountInfo();
  }
  public created() {
    // this.getCvsCorectionList();
  }
  // 统计信息
  public async getCountInfo() {
    this.cvsCorrectionCountInfoVo = await CorrectionService.getCountInfo();
  }
  // 列表
  public async getCvsCorectionList() {
     // console.log(this.$store.state.user.dictionary.dicList.guestState)
     this.cvsCorrectionListSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
     this.cvsCorrectionListSearch['pageParam.pageSize'] = this.pageParam.pageSize;
     if (!this.cvsCorrectionListSearch.repairStatus) { // 如果选全部的话，删除该字段
       delete this.cvsCorrectionListSearch.repairStatus;
     }
     // local中存当前搜索条件 
    const params = {
        pageParam: this.pageParam,
        searchParams: this.cvsCorrectionListSearch,
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
     const res = await CorrectionService.cvsCorrectionPage(this.cvsCorrectionListSearch);
     this.tableData = res.resultData;
     this.totalCount = res.totalCount;
  }
  // pageSize 改变时会触发
  public handleSizeChange(val: number) {
      this.pageParam.pageSize = val;
      this.getCvsCorectionList();
  }
  // 当前页改变时会触发
  public handleCurrentChange(val: number) {
      this.pageParam.pageIndex = val;
      this.getCvsCorectionList();
  }
  public async repairInfo(id: number, repairStatus: number) {
   const res = await CorrectionService.updateStatus(id);
   let msg: string = '';
   // 信息提示
   msg = repairStatus === 2 ? '修复成功！' : '已修改为未修复状态！';
   if (res.resCode === '0') {
        this.$message({
            type: 'success',
            message: msg,
            center: true,
        });
        this.getCvsCorectionList();
   }
  }
  // 未修复 状态确认
  public noRepairConfirm(id: number, repairStatus: number) {
     this.$confirm('确定未修复此信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.repairInfo(id, repairStatus);
        });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
    .w-100{
         width: 100px;
    }
    .w-120{
        width: 120px;
    }
    .w-150{
         width: 150px;
    }
     .w-160{
         width: 160px;
    }
    .w-200{
         width: 200px;
    }
    .w-250{
         width: 200px;
    }
    .align-center-self {
        text-align: center;
        line-height: 40px;
    }
    .p-l-12{
        padding-left:12px;
    }
</style>
